<template>
  <Echart :options="options" v-if="pageFlag"/>
  <reacquire v-else @click="getData"/>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      options:{}
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    initChart(data){
      this.options={
        tooltip:{
          trigger:'axis',
          show:true,
          backgroundColor:'#00000088',
          borderColor:'#0072FF',
          textStyle:{
            color:'#fff',
          },
          formatter:data=>{
            var newStr = data[0].axisValue + '<br>'
            data.forEach((item,index) => {
              newStr += item.marker + item.seriesName + ':'
              if (index!=2) {
                if (item.value == 0) {
                  newStr += '--<br>'
                }else{
                  newStr += item.value + '万<br>'
                }
              }else{
                newStr += item.value + '%'
              }
            });
            return newStr
          }
        },
        legend:{
          data:['已销售','计划销售','完成率'],
          textStyle:{
            color:'#fff'
          }
        },
        grid:{
          top:35,
          bottom:35,
          left:50,
          right:45
        },
        xAxis:{
          type:'category',
          data:data.category
        },
        yAxis:[
          {
            axisLabel:{
              formatter:'{value}万'
            },
            splitLine:{
              show:false
            }
          },
          {
            axisLabel:{
              formatter:'{value}%'
            },
            splitLine:{
              show:false
            }
          }
        ],
        series:[
          {
            name:'计划销售',
            type:'bar',
            data:data.lineData,
            barWidth:10,
            itemStyle:{
              borderRadius:5,
              color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                  {offset:0,color:'#755691'},
                  {offset:1,color:'#000'},
                ],
                global:false
              }
            },
            barGap:'-100%',
          },
          {
            name:'已销售',
            type:'bar',
            data:data.barData,
            barWidth:10,
            itemStyle:{
              borderRadius:5,
              color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                  {offset:0,color:'#8678d0'},
                  {offset:1,color:'#56a1da'},
                ],
                global:false
              }
            }
          },
          {
            name:'完成率',
            type:'line',
            data:data.rateData,
            yAxisIndex:1,
            smooth:true,
            itemStyle:{
              color:'#a74485'
            },
            symbolSize:8
          }
        ]
      }
    },
    getData(){
      currentGET('big9').then(res=>{
        if (res.success) {
          this.initChart(res.data)
          this.pageFlag = true
          this.switper()
        }else{
          this.pageFlag = false
        }
      })
    },
    switper(){
      this.timer = setInterval(()=>{
        this.getData
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>
</style>